Redesigning My Norton Website for Adaptive Screen Sizes- Design #2
Background -
My Norton is a comprehensive cybersecurity platform offering various products and services to protect users from online threats. As the lead UX-UI designer, I spearheaded the redesign of the My Norton website to ensure optimal user experience across multiple devices, including desktops, tablets, and smartphones.
~
Objective -
The primary objective was to create an adaptive website that seamlessly adjusted to various screen sizes without compromising usability or visual appeal.
Key goals included:
1. Improve accessibility and usability across devices.
2. Enhance visual consistency and branding.
3. Optimize user engagement and conversion rates.
4. Implement responsive design principles effectively.
~
Research and Discovery -
To kick off the project, I conducted thorough research and analysis to understand user behavior and technological trends:
User Persona Development:
Defined user personas to capture different needs and behaviors across devices.
Device Usage Analysis:
Studied analytics data to identify prevalent screen sizes and devices among target users.
Competitor Bench-marking:
Analyzed competitors' websites to learn from best practices in responsive design.
~
Design Process -
1. Responsive Design Strategy
Based on research insights, I formulated a responsive design strategy that prioritized flexibility and consistency across all devices:
Fluid Grid System: Implemented a fluid grid layout that adjusted seamlessly to different screen widths.
Flexible Images and Media: Used CSS techniques like max-width to ensure images and media scaled proportionally.
Media Queries: Employed media queries to apply specific styles based on screen size breakpoints.
2. Visual Design
The visual redesign focused on maintaining a cohesive brand identity while adapting to varying screen sizes:
Consistent Branding Elements: Ensured consistent use of colors, typography, and brand assets across devices.
Mobile-First Approach: Designed for mobile devices first, optimizing for smaller screens before scaling up for desktops.
3. User Interface (UI) Enhancements
To enhance usability and interactivity across devices, I implemented UI enhancements tailored to different screen sizes:
Touch-Friendly Elements: Increased touch target sizes and optimized interactive elements for touchscreens.
Navigation Simplification: Streamlined navigation menus for smaller screens to improve usability on mobile devices.
4. Testing and Iteration
Throughout the design process, I conducted rigorous testing and iteration to validate the effectiveness of the adaptive design:
Device Testing: Used emulators and real devices to test the website's performance across a range of screen sizes.
User Feedback Integration: Incorporated user feedback to refine design elements and address usability issues.
~
Outcome -
The adaptive redesign of the My Norton website yielded significant improvements:
Enhanced User Experience:
Users reported improved usability and accessibility across devices.
Increased Engagement:
Lowered bounce rates and increased time spent on the site, particularly on mobile devices.
Improved Conversion Rates:
Simplified checkout processes and optimized call-to-action buttons led to higher conversion rates.
~
Conclusion -
The redesign of the My Norton website with an adaptive design approach successfully addressed the challenges of catering to diverse screen sizes and devices. By leveraging responsive design principles and prioritizing user experience, the new website achieved improved accessibility, engagement, and conversion rates. Ongoing monitoring and optimization will continue to drive further enhancements and ensure a seamless experience across evolving technology landscapes.
~
Thank You !
DISCLAIMER: This product is property of NortonLifeLock Inc. all involvement and designs were done while collaborating with the Norton Global Product Design team.
